﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>R4</title>
    <script src="libs/jquery.min.js" type="text/javascript"></script>
    <script src="libs/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script src="libs/knockout-2.1.0.js" type="text/javascript"></script>
    <script src="libs/json2.js" type="text/javascript"></script>
    <script src="libs/jsex.js" type="text/javascript"></script>
    <link href="libs/normalize.css" type="text/css" rel="stylesheet" />
    <link href="libs/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" rel="stylesheet" />
    <script src="js/common.js" type="text/javascript"></script>
    <script src="R4.js" type="text/javascript"></script>
    <link href="css/common.css" type="text/css" rel="stylesheet" />
    <link href="R4.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div id='package'>
        <div id='saveResultDialog' class='shadow round-corner bgwhite' style='display: none'>
            <table class='cell-p5'>
                <thead><tr><td>Ghi file thành công. Ấn vào <a href='javascript:;' data-bind='click:openSavedFile'>đây</a> để xem file</td></tr></thead>
            </table>
        </div>
        <div id='packResultDialog' class='shadow round-corner bgwhite' style='display: none'>
            <table class='cell-p5' data-bind='if:packresult.status()==0'>
                <thead>
                    <tr><td><img src='images/loading.gif' /> Đang đóng gói...</td></tr>
                </thead>
            </table>
            <table class='cell-p5' data-bind='if:packresult.status()==1'>
                <thead>
                    <tr><td>Đóng gói thành công. Ấn vào <a href='javascript:;' data-bind='click:packresult.open'>đây</a> để xem kết quả</td></tr>
                </thead>
            </table>
            <table class='cell-p5' data-bind='if:packresult.status()==2'>
                <thead><tr><td>Có lỗi xảy ra</td></tr></thead>
                <tbody class='content'><tr><td data-bind='text:packresult.message'></td></tr></tbody>
                <tfoot><tr><td></td></tr></tfoot>
            </table>
        </div>
        <div id='extraDialog' class='shadow round-corner bgwhite z100 w73' style='display: none'>
            <table class='cell-p5 w100'>
                <thead>
                    <tr>
                        <td colspan='2'>
                            Cấu hình
                        </td>
                    </tr>
                </thead>
                <tbody class='content'>
                    <tr>
                        <th>
                            Loại trừ
                        </th>
                        <td>
                            <input type='text' data-bind='value:excludes' class='w100' />
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Bao gồm
                        </th>
                        <td>
                            <input type='text' data-bind='value:includes' class='w100' />
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan='2'>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div class='shadow round-corner'>
            <table class='w100 cell-p5'>
                <colgroup>
                    <col width='100px' />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th colspan='2'>
                            <b>Thông tin đóng gói</b><span style='float: right'><a href='javascript:;' data-bind='click:reset'>
                                <img src='images/new.png' alt='Tạo mới' /></a> <a href='javascript:;' data-bind='click:open'>
                                    <img src='images/open.png' alt='Mở file' /></a> <a href='javascript:;' data-bind='click:save'>
                                        <img src='images/save.png' alt='Ghi' /></a> <a href='javascript:;' data-bind='click:extra'>
                                            <img src='images/config.png' alt='Cấu hình' /></a></span>
                        </th>
                    </tr>
                </thead>
                <tbody class='content'>
                    <tr>
                        <th>
                            Thư mục gốc
                        </th>
                        <td>
                            <input type='text' data-bind='value:input, event: { change:updateInput }, browseFolder: true'
                                class='w100' />
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Thư mục output
                        </th>
                        <td>
                            <input type='text' data-bind='value:output, browseFolder: true' class='w100' />
                        </td>
                    </tr>
                    <tr>
                        <th>
                            Tạo file zip
                        </th>
                        <td>
                            <input type='text' data-bind='value:zip' />
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan='2'>
                            <a href='javascript:;' class='button' data-bind='click:pack'>Đóng gói</a>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
        <br />
        <div class='shadow round-corner w100'>
            <table class='w100 cell-p5'>
                <thead>
                    <tr>
                        <th colspan='4'>
                            <b>Danh sách file/thư mục</b> <span style='float: right'><a class='imgbutton' href='javascript:;'
                                data-bind='click:clear'>
                                <img src='images/clear.png' alt='Xóa toàn bộ danh sách' /></a> <a class='imgbutton'
                                    href='javascript:;' data-bind='click:add'>
                                    <img src='images/add.png' alt='Thêm file/thư mục' /></a> </span>
                        </th>
                    </tr>
                </thead>
                <tbody id='itemlist' data-bind='foreach: items' class='content vscroll'>
                    <tr>
                        <td width='16px'>
                            <a class='imgbutton' href='javascript:;' data-bind='click:$root.remove'>
                                <img src='images/delete.png' alt='Xóa' /></a>
                        </td>
                        <td width='16px'>
                            <img data-bind='attr: {src: getIcon()}' />
                        </td>
                        <td data-bind='text:getName()' />
                        <td data-bind='text:path' />
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan='4'>
                            Tổng số: <span data-bind='text:items().length' />
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div id='commonDialog' class='shadow round-corner bgwhite' style='display: none'>
        <table class='cell-p5'>
            <thead>
                <tr>
                    <td align='center' />
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td />
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td />
                </tr>
            </tfoot>
        </table>
    </div>
    <div id='deleteDialog' class='shadow round-corner bgwhite' style='display: none'>
        <table class='cell-p5'>
            <thead>
                <tr>
                    <td align='center'>
                        Xóa file/thư mục này?
                    </td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td />
                </tr>
            </tfoot>
        </table>
    </div>
    <div id='addDialog' class='shadow round-corner bgwhite w73' style='display: none'>
        <table class='cell-p5' style='table-layout: fixed'>
            <thead>
                <tr>
                    <td colspan='2'>
                        <input type='text' data-bind='value:input, event: { change: search}' class='w100' />
                    </td>
                </tr>
            </thead>
            <tbody class='content vscroll' style='max-height: 200px' data-bind='foreach:items'>
                <tr data-bind='click:$parent.select' style='cursor: pointer'>
                    <td>
                        <img data-bind='attr: {src: getIcon() }' />
                    </td>
                    <td data-bind='text:getName()' />
                    <td data-bind='text:path' />
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td valign='middle' colspan='2'>
                        <img src='images/loading.gif' data-bind='visible: !package.cached()' alt='Thống kê'/>
                        Hiển thị <span data-bind='text:items().length'></span>/<span data-bind='text:totalCount'></span> kết quả</td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div id='loadingDialog' class='shadow round-corner bgwhite' style='display: none'>
        <table class='cell-p5'>
            <thead>
                <tr><td valign='middle'><img src='images/loading.gif' alt='Loading' /></td>
                    <td valign='middle'>Đang tải dữ liệu</td></tr>
            </thead>
        </table>
    </div>
</body>
</html>
